<template>
  <div class="audit-progress">
    <el-timeline style="max-width: 600px">
      <el-timeline-item
        v-for="(item, index) in processRecords"
        :key="index"
        :icon="item.underway ? Loading : item.flowCmd == 3 ? Close : Check"
        :type="item.underway ? 'warning' : flowCmdMapping[item.flowCmd]?.timeType"
        size="large"
      >
      <template #icon>
        {{ item.underway ? '审批中' : item.flowCmd == 3 ? '拒绝' : '通过' }}
      </template>
        <div class="node-operations">
          <div v-if="item.underway" class="audit-underway">
            <div class="title">审批中</div>
            <div v-if="item.unattended" class="description">审批人为空，已自动转交给流程管理员</div>
            <div v-if="item.userIds.length > 1 && item.node" class="description">
              {{ ['joint', 'single'].includes(item.node.multi) ? `需${item.node.multiPercent == 100 ? '所有' : item.node.multiPercent + '%'}人审批同意` : '一名审批人同意即可' }}
            </div>
            <div class="users">
              <el-tag v-for="user in item.userIds" type="" :key="user" style="margin-right: 4px; margin-bottom: 2px">{{ userMapping[user] }}</el-tag>
            </div>
          </div>
          <div v-else class="audit-completed">
            <div class="audit-time">{{ dayjs(item.startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div class="audit-info">
              <span class="audit-name">{{ userMapping[item.auditor] }}</span>
              <span class="audit-cmd">
                <el-tag :type="flowCmdMapping[item.flowCmd]?.type">{{ flowCmdMapping[item.flowCmd]?.text }}</el-tag>
              </span>
            </div>
          </div>
          <div v-if="item.comment" class="audit-comment">{{ item.comment }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { getProcessStatus } from '@/api/workflow'
import { Check, Loading, Close } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const props = defineProps({
  id: {
    type: String
  }
})
const emits = defineEmits(['update:nodeConfig'])
console.log("进入审核进度");

const store = useStore()
const userMapping = computed(() => store.state.flow.operatorMapping.user)
// 分三种情况，审核中，操作中，已完成（要区分是不是拒绝）
const flowCmdMapping = ref({
  0: { type: '', timeType: 'primary', text: '发起人' },
  3: { type: 'danger', timeType: 'danger', text: '拒绝' },
  4: { type: '', timeType: 'primary', text: '通过' },
  7: { type: 'warning', timeType: 'primary', text: '驳回' },
  14: { type: 'success', timeType: 'primary', text: '评论' }
})

const processRecords = ref([])
const handleAuditProgress = async () => {
  const res = await getProcessStatus({ processInstanceId: props.id })
  console.log("获取审核进度",res);
  
  if (res.code === 20000) {
    processRecords.value = res.data.processStatusList
    // 取最后一个对象的信息作为节点信息
    emits('update:nodeConfig', processRecords.value[processRecords.value.length - 1])
  }
}

onMounted(() => {
  handleAuditProgress()
})
</script>

<style lang="scss" scoped>
.audit-progress{
  .node-operations{
    padding-top: 4px;
    .audit-underway{
      .title{
        color: $mainColor;
      }
      .description{
        margin-top: 2px;
        font-size: 12px;
        color: #aaaaaa;
      }
      .users{
        margin-top: 10px;
      }
    }
    .audit-completed{
      .audit-info{
        display: flex;
        align-items: center;
        margin-top: 10px;
        line-height: 14px;
        font-size: 14px;
        color: #666666;
        .audit-cmd{
          margin-left: 5px;
        }
      }
    }
    .audit-comment{
      margin-top: 6px;
      padding: 8px 16px;
      background: #f8f8fa;
    }
  }
}

</style>
